<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="@/assets/logo.png" alt="">
      </template>
      <template #right>
        <!-- postcss没办法对标签内的尺寸进行转换,需要自己手动转换 -->
        <!-- 需要返回上一页所以必须要用push -->
        <van-icon name="search" size="0.6rem" color="#fff" @click="$router.push({ path: '/seach' })" />
      </template>
    </van-nav-bar>

    <!-- tab栏 -->
    <div class="main">
      <van-tabs @change="change()" v-model="channel_id" sticky offset-top="1.226667rem" swipeable animated>
        <van-tab :name="item.id" :title="item.name" :key="item.id" v-for="item in userChanneList">
          <ArticleList :listid="channel_id"></ArticleList>
        </van-tab>
      </van-tabs>
      <van-icon name="plus" size="0.33333334rem" class="more" @click="showPopup()" />
    </div>

    <van-popup closeable v-model="show" position="top" :style="{ height: '100vh' }">
      <!-- 组件上绑定事件可以调用子组件中的方法 -->
      <Edit :userList="userChanneList" ref="editRef" :unCheckList="unCheckList" @addChannel="addChannel"
        @delChannel="delChannel" @jumpChannel="jumpChannel" />
    </van-popup>
  </div>
</template>

<script>
import Notify from '@/ui/Notify'
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    ArticleList: () => import('./components/ArticleList.vue'),
    // eslint-disable-next-line vue/no-unused-components
    Edit: () => import('./ChannelEdit.vue')
  },
  activated () {
    window.addEventListener('scroll', this.$utils.throttle(this.scrollFn, 500))
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  // 有了组件缓存,使用应该是deactivated
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  },
  computed: {
    unCheckList () {
      return this.allChanneList.filter(obj => {
        const index = this.userChanneList.findIndex(obj2 =>
          obj.id === obj2.id
        )
        // 找到了返回-1,,就返回false不放入新数组内
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
    }
  },
  async created () {
    const { data: res } = await this.$api.getUserChannelsAPI()
    this.userChanneList = res.data.channels
    const { data: res1 } = await this.$api.getAllChannelsAPI()
    this.allChanneList = res1.data.channels

    const str = '[{"id":1312651561456156815},{"id":98749874984987498494}]'
    // 转数组后超出了JS安全数字范围,所以需要转成对象或者字符串
    // 引入第三方方法转化成数组
    var newArr = this.$jsonB.parse(str)
    newArr.map((item) => {
      console.log(item.id.toString())
    })
  },
  data () {
    return {
      show: false,
      channel_id: 0, // 当前选中的标签
      userChanneList: [], // 用户选择的频道
      allChanneList: [], // 全部频道
      channelSobj: {}
    }
  },
  methods: {
    showPopup () {
      this.show = true
      setTimeout(() => {
        this.$refs.editRef.isEdit = false
      }, 200)
    },
    // 调用子组件的方法然后存入用户频道标签
    async addChannel (e) {
      this.userChanneList.push(e)
      // 由于接口更新所以不需要替换键值
      // 由于传入的字段与数组中的字段不符,所以需要替换键值
      // this.userChanneList.forEach((obj, index) => {
      //   // 删除原来的键值
      //   delete obj.name
      //   // 加入新的键值
      //   obj.seq = index
      // })
      const { data: res } = await this.$api.setUserChannelsAPI({ channels: this.userChanneList })
      Notify({ type: 'success', message: res.message })
    },
    async delChannel (e) {
      // 找下标,找出对应的值
      const index = this.userChanneList.findIndex(obj => obj.id === e.id)
      // 找到下标后去去用户选择的数组中删除
      this.userChanneList.splice(index, 1)
      // 获取id删除
      this.$api.delUserChannelsAPI(index)
    },
    jumpChannel (e) {
      this.channel_id = e.id
      this.show = false
    },
    scrollFn () {
      // 在滑动的时候就直接把当前的滚动距离存入路由的meta中
      this.$route.meta.scrollT = document.documentElement.scrollTop
      // 给对象不确定的字段添加数据
      this.channelSobj[this.channel_id] = this.$route.meta.scrollT
    },
    change () {
      // 在不确定数组中的值时使用[]
      setTimeout(() => {
        document.documentElement.scrollTop = this.channelSobj[this.channel_id]
      }, 0)
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
  height: 35px;
  width: 35px;
}

.main {
  padding-top: 46px;
}

/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background: #fff;
}

/deep/ .van-icon-cross {
  font-size: 18px;
  color: #000;
}

.more {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
</style>
